import React from 'react'
import {Form, Input, Button, Select} from 'antd'

const FormItem = Form.Item;
const Option = Select.Option;

class Search extends React.Component {

  handleSearch = () => {
    const { onSearch } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onSearch(values);
      }
    });
  };



  handleReset = () => {
    const { onReset } = this.props;
    onReset();
    this.props.form.resetFields();
  };

  render() {

    const { getFieldDecorator } = this.props.form;

    const { name = [], gid = [] } = this.props.record;
    const groupList = JSON.parse(sessionStorage.getItem('groupList'));
    const results = groupList.map(group => <Option key={group.id}>{group.groupName}</Option>);

    return (
      <div>
        <Form layout="inline"
          // className="ant-advanced-search-form"
          onSubmit={this.handleSearch}
        >
              <FormItem label={'姓名'}>
                {getFieldDecorator('name',{
                  initialValue: name,
                })(
                  <Input placeholder="输入姓名搜索" />
                )}
              </FormItem>
              <FormItem label="组">
                {getFieldDecorator('gid', {
                  initialValue: gid,
                })(

                  <Select style={{margin: '0 0 0 0', padding: '4px 11px', width: '250px', height: '32px', 'fontSize': '14px', 'lineHeight': '1.5',}}
                    placeholder="选择组"
                    onChange={this.handleSelectChange}>
                    {results}
                  </Select>
                )}
              </FormItem>
              <div style={{ textAlign: 'right', float: 'right' }}>
                <Button type="primary" htmlType="submit">搜索</Button>
                <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
                  重置
                </Button>
            </div>
        </Form>
      </div>
    )

  }

}

export default Form.create()(Search);

